<template>
  <div class="result">
    <p v-for="item in resultCityList" :key="item.cityId">{{ item.name }}</p>
    <h3 v-show="!resultCityList.length">没有找到匹配的城市...</h3>
  </div>
</template>

<script>
export default {
  props: ['resultCityList']
}
</script>

<style lang="scss" scoped>
.result {
  flex: 1;
  background: #fff;
  overflow: hidden;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}

p {
  color: #000;
  font-size: 0.14rem;
  line-height: 0.44rem;
  padding-left: 0.15rem;
  border-bottom: 0.01rem solid #f8f8f8;

  &:hover {
    background: #eee;
  }
}

h3 {
  text-align: center;
  line-height: 1.5rem;
  color: #666;
  font-size: 0.16rem;
}
</style>
